/**
 * 系统管理 用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true"  class="user-search">
    
      <el-form-item label="">
        <el-input size="small" v-model="searchname" placeholder="输入用户名"></el-input>
      </el-form-item>
     
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="tj()">添加</el-button>
      
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" @selection-change="selectChange" :data="userData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="50">
      </el-table-column>
      <el-table-column align="center" sortable prop="id" label="用户ID" >
      </el-table-column>
      <el-table-column align="center" sortable prop="userName" label="用户名" >
      </el-table-column>
      <el-table-column align="center" sortable prop="realName" label="姓名" >
      </el-table-column>
      <el-table-column align="center" sortable prop="phone" label="手机号" >
      </el-table-column>
      <el-table-column align="center" sortable prop="sex" label="性别" >
      </el-table-column>
      <el-table-column align="center" sortable prop="email" label="邮件" >
      </el-table-column>
      <el-table-column align="center" sortable prop="role" label="角色">
      </el-table-column>
      <el-table-column align="center" sortable prop="address" label="地址">
      </el-table-column>
      <el-table-column align="center" sortable prop="difficultyType" label="困难类型" >
      </el-table-column>
      <el-table-column align="center" sortable prop="createDate" label="注册时间" >
        <template slot-scope="scope">
          <div>{{scope.row.createDate|timestampToTime}}</div>
        </template>
      </el-table-column>
  
      <el-table-column label="操作" min-width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)">查看详细</el-button>
          <el-button size="mini" type="danger" @click="deluser( scope.row)">删除</el-button>
          <!-- <el-button size="mini" type="success" @click="resetpwd(scope.$index, scope.row)">重置密码</el-button> -->
         
          <!-- <el-button size="mini" type="success" @click="offlineUser(scope.$index, scope.row)">下线</el-button> -->
          <!-- <el-button size="mini" type="success" @click="refreshCache(scope.$index, scope.row)">刷新缓存</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
      <el-form label-width="80px" ref="editForm" :model="editForm" >
        <el-form-item label="用户名" prop="userName">
          <el-input size="small" v-model="editForm.userName" auto-complete="off" placeholder="请输入用户名" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input size="small" v-model="editForm.password" auto-complete="off" placeholder="请输入密码" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realName">
          <el-input size="small" v-model="editForm.realName" auto-complete="off" placeholder="请输入姓名" disabled></el-input>
        </el-form-item>
         <el-form-item label="身份证" prop="idCard">
          <el-input size="small" v-model="editForm.idCard" auto-complete="off" placeholder="请输入身份证号" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input size="small" v-model="editForm.phone" placeholder="请输入手机号" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮件" prop="email">
          <el-input size="small" v-model="editForm.email" placeholder="请输入邮箱地址" disabled></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="editForm.sex" label="男">男</el-radio>
          <el-radio v-model="editForm.sex" label="女">女</el-radio>
        </el-form-item>
         <el-form-item label="账户" prop="account">
          <el-input size="small" v-model="editForm.account" placeholder="请输入账户" disabled></el-input>
        </el-form-item>
         <el-form-item label="地址" prop="address">
          <el-input size="small" v-model="editForm.address" placeholder="请输入地址" disabled></el-input>
        </el-form-item>
         <el-form-item label="困难类型" prop="difficultyType" >
           <el-radio v-model="editForm.difficultyType" label="孤寡老人" disabled>孤寡老人</el-radio>
           <el-radio v-model="editForm.difficultyType" label="贫困学生" disabled>贫困学生</el-radio>
           <el-radio v-model="editForm.difficultyType" label="烈士子女" disabled>烈士子女</el-radio>
           <el-radio v-model="editForm.difficultyType" label="其他" disabled>其他</el-radio>
        </el-form-item>
         <el-form-item label="角色类型" prop="role">
           <el-radio v-model="editForm.role" label="捐助者" disabled>捐助者</el-radio>
           <el-radio v-model="editForm.role" label="受助者" disabled>受助者</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        
        <el-button size="small" @click='closeDialog()'>关闭</el-button>
        <!-- <el-button   @click="editdata()">修改</el-button> -->

      </div>
    </el-dialog>


    <!--添加 -->
     <el-dialog :title="title" :visible.sync="stat" width="30%" @click='closeDialog("edit")'>
      <el-form label-width="80px" ref="editForm" :model="editForm1" >
        <el-form-item label="用户名" prop="userName">
          <el-input size="small" v-model="editForm1.userName" auto-complete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input size="small" v-model="editForm1.password" auto-complete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realName">
          <el-input size="small" v-model="editForm1.realName" auto-complete="off" placeholder="请输入姓名"></el-input>
        </el-form-item>
         <el-form-item label="身份证" prop="idCard">
          <el-input size="small" v-model="editForm1.idCard" auto-complete="off" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input size="small" v-model="editForm1.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮件" prop="email">
          <el-input size="small" v-model="editForm1.email" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="editForm1.sex" label="男">男</el-radio>
          <el-radio v-model="editForm1.sex" label="女">女</el-radio>
        </el-form-item>
         <el-form-item label="账户" prop="account">
          <el-input size="small" v-model="editForm1.account" placeholder="请输入账户"></el-input>
        </el-form-item>
         <el-form-item label="地址" prop="address">
          <el-input size="small" v-model="editForm1.address" placeholder="请输入地址"></el-input>
        </el-form-item>
         <el-form-item label="困难类型" prop="difficultyType">
           <el-radio v-model="editForm1.difficultyType" label="孤寡老人">孤寡老人</el-radio>
           <el-radio v-model="editForm1.difficultyType" label="贫困学生">贫困学生</el-radio>
           <el-radio v-model="editForm1.difficultyType" label="烈士子女">烈士子女</el-radio>
           <el-radio v-model="editForm1.difficultyType" label="其他">其他</el-radio>
        </el-form-item>
         <el-form-item label="角色类型" prop="role">
           <el-radio v-model="editForm1.role" label="捐助者">捐助者</el-radio>
           <el-radio v-model="editForm1.role" label="受助者">受助者</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        
        <el-button size="small" @click='closeDialog()'>取消</el-button>
       
        <el-button  size="small" type="primary" :loading="loading" class="title" @click="adddata()">保存</el-button>
      </div>
    </el-dialog>
    <!-- 数据权限 -->
  
    <!-- 所属单位 -->
  
  </div>
</template>

<script>
// 导入请求方法
import axios from 'axios';
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      searchname:"",
      grxx:{},
      stat:false,
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      title: '添加用户',
      editFormVisible: false, //控制编辑页面显示与隐藏
      dataAccessshow: false, //控制数据权限显示与隐藏
      unitAccessshow: false, //控制所属单位隐藏与显示
      // 编辑与添加
      editForm: {
        id: '',
        userName: '',
        password: '',
        realName: '',
        role: '',
        sex: '',
        idCard: '',
        account: '',
        phone: '',
        email: '',
        address: '',
        difficultyType: '',
        createDate: '',
       
      },
      stat:false,
      editForm1:{
             id: '',
        userName: '',
        password: '',
        realName: '',
        role: '',
        sex: '',
        idCard: '',
        account: '',
        phone: '',
        email: '',
        address: '',
        difficultyType: '',
        createDate: '',
      },
      selectdata: [],
      // rules表单验证
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        userRealName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        roleId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
        userMobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
            required: true,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        userEmail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            required: true,
            message: '请输入正确的邮箱',
            trigger: 'blur'
          }
        ],
        userSex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
      },
      // 删除用户
      seletedata: {
        id: '',
        token: localStorage.getItem('logintoken')
      },
      // 重置密码
      resetpsd: {
        id: '',
        token: localStorage.getItem('logintoken')
      },
      // 用户下线
      offline: {
        token: localStorage.getItem('logintoken')
      },
      // 请求数据参数
      formInline: {
        page: 1,
        limit: 10,
        deptId: '',
        userName: '',
        userMobile: '',
        isLock: ''
      },
      //用户数据
      userData: [],
      // 数据权限
      UserDept: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 选中
      checkmenu: [],
      //参数role
      saveroleId: '',
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },

  /**
   * 数据发生改变
   */
  watch: {},

  /**
   * 创建完毕
   */
  created() {
    this.getdata()
    
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
   closeDialog(){
       this.stat = false,
       this.editFormVisible = false
   },
     editdata(){
   
        axios.post("http://47.106.193.50:8080/user/updateUser",this.editForm).then(res=>{
          let data = res.data.code
          if (data ="200") {
             this.editFormVisible = false
              this.stat = false,
                this.getdata()
               alert("成功")
          } else {
              this.editFormVisible = false
               this.stat = false,
            alert("失败")
          }
        })
      

    },
    tets(row){
     console.log(row,"555555");
    },
    // 获取数据方法
    getdata() {
      // this.loading = true
      this.loading = false
      // this.userData = res.data.data
      // // 分页赋值
      // this.pageparm.currentPage = this.formInline.page
      // this.pageparm.pageSize = this.formInline.limit
      // this.pageparm.total = res.count
      // 模拟数据结束
      axios.get("http://47.106.193.50:8080/admin/users").then(res => {
           let data = res.data.data
           this.userData = data
           console.log(data,"5555");
            this.pageparm.currentPage = this.userData.page
      this.pageparm.pageSize = this.userData.limit
      this.pageparm.total = data.count

      }
      
      )
     
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    //搜索事件
      search() {
        let arr= []
        let list =  this.userData
       console.log(list,'323232');
       if (this.searchname == "") {
           this.getdata()
       }else{
        // console.log(this.searchname);
        for (let i = 0; i < list.length; i++) {
         if (list[i].userName.indexOf(this.searchname) >= 0) {
         arr.push(list[i])
      }}
        //  console.log(arr,'react');
         this.userData = arr
       }},
    // 修改type
    editType: function(index, row) {
      this.loading = true
      let parm = {
        lock: '',
        userId: '',
        token: localStorage.getItem('logintoken')
      }
      parm.userId = row.userId
      let lock = row.isLock
      if (lock == 'N') {
        parm.lock = 'Y'
      } else {
        parm.lock = 'N'
      }
      // 修改状态
      userLock(parm).then(res => {
        this.loading = false
        if (res.success == false) {
          this.$message({
            type: 'info',
            message: res.msg
          })
        } else {
          this.$message({
            type: 'success',
            message: '状态修改成功'
          })
          this.getdata(this.formInline)
        }
      })
    },
    tj(){
    this.stat = true
      this.title = '添加用户'
        console.log(this.title,'5添加');

        this.editForm1.userName = ''
        this.editForm1.realName = ''
        this.editForm1.sex = ''
        this.editForm1.phone = ''
        this.editForm1.email = ''
        this.editForm1.password = ''
        this.editForm1.account = ''
        this.editForm1.idCard = ''
        this.editForm1.role = ''
        this.editForm1.difficultyType = ''
    },
    //显示编辑界面
    handleEdit: function(row) {
      console.log(row,"4444");
      this.editFormVisible = true
       
        console.log(this.title,'55454545');
        this.editForm.id = row.userId
        this.editForm.userName = row.userName
        this.editForm.realName = row.realName
        this.editForm.sex = row.sex
        this.editForm.phone = row.phone
        this.editForm.email = row.email
        this.editForm.password = row.password
        this.editForm.account = row.account
        this.editForm.difficultyType = row.difficultyType
   
    },
   
    adddata(){
        axios.post("http://47.106.193.50:8080/userRegister",this.editForm1).then(res=>{
          let code = res.data.code
          if (code == "200") {
              this.editFormVisible = false
              this.stat =false
              alert("成功")
          } else {
              this.editFormVisible = false
              this.stat =false

            alert("失败")
          }
        })

    },
    // 编辑、添加提交方法
 
  
    // 保存部门
  
    // 选择复选框事件
    selectChange(val) {
      this.selectdata = val
    },
    // 关闭编辑、增加弹出框
   
    deluser(row){
        axios.post("http://47.106.193.50:8080/user/deleteUser",row)
            .then(res => {
               let data = res.data.code
              if (data == "200") {
                this.$message({
                  type: 'success',
                  message: '数据已删除!'
                })
                this.getdata()
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除！'
          })
        })
              }
            })
    },
    // 删除用户
   
    // 重置密码
  
    // 数据权限
  
    //数据格式化
  
    // 选中菜单
   
    // 菜单权限-保存

    // 下线用户
   
    // 刷新缓存
  
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 